import React, { Component, createElement, Fragment } from 'react';
import { connect } from 'dva';
import GridLayout from 'react-grid-layout';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import Charts from '@/components/Charts';
import PanelTitle from '@/components/PanelTitle';
import styles from './index.less';

@connect(({ commonModel }) => ({ commonModel }))
class GridLayoutDemo extends Component {
  state = {
    layout: [],
  };

  componentDidMount() {
    this.fetch();
  }

  fetch = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'commonModel/query',
      targetKey: 'barData',
      payload: {},
      callback: ({ singleBarData }) => {
        this.setState({
          layout: [
            {
              i: 'a',
              x: 0,
              y: 0,
              w: 4,
              h: 7,
              chartParams: {
                title: '标题1',
                type: 'Line',
                data: singleBarData,
                showValue: true,
                showTooltip: false,
              },
            },
            {
              i: 'b',
              x: 4,
              y: 0,
              w: 4,
              h: 7,
              chartParams: {
                title: '标题2',
                type: 'Bar',
                data: singleBarData,
                showValue: true,
                showTooltip: false,
              },
            },
            {
              i: 'c',
              x: 8,
              y: 0,
              w: 4,
              h: 7,
              chartParams: {
                title: '标题3',
                type: 'Area',
                data: singleBarData,
                showValue: true,
                showTooltip: false,
              },
            },
            {
              i: 'd',
              x: 0,
              y: 1,
              w: 12,
              h: 7,
              chartParams: {
                title: '标题4',
                type: 'Bar',
                data: singleBarData,
                showValue: true,
                showTooltip: false,
              },
            },
          ],
        });
      },
    });
  };

  onLayoutChange = newLayout => {
    const { layout } = this.state;
    if (layout && layout.length) {
      newLayout.map((item, index) => (layout[index] = { ...layout[index], ...item }));
    }
    this.setState({ layout });
  };

  render() {
    const { layout } = this.state;

    return (
      <Fragment>
        {layout && layout.length > 0 && (
          <GridLayout
            ref={this.handleRoot}
            layout={layout}
            rowHeight={50 * window.viewportScale}
            width={document.body.clientWidth - 256 * window.viewportScale}
            margin={[30 * window.viewportScale, 0]}
            containerPadding={[0, 0]}
            onLayoutChange={this.onLayoutChange}
            // isDraggable={false}
            // isResizable={false}
          >
            {layout.map(({ i, w, h, chartParams }) => (
              <div key={i} style={{ padding: '0.4rem 0' }}>
                <div className={styles.chartPanel}>
                  <PanelTitle title={chartParams.title} />
                  {createElement(Charts[chartParams.type], {
                    ...chartParams,
                    height: (h - 2) * 50,
                    key: `${w}${h}`,
                  })}
                </div>
              </div>
            ))}
          </GridLayout>
        )}
      </Fragment>
    );
  }
}

export default GridLayoutDemo;
